<template>
    <!-- 简单组件 -->
    <el-select v-model="selectValue" @change="selectChange" :collapse-tags="collapseTags" :multiple="multiple" remote
        reserve-keyword :remote-method="remoteMethod" :loading="loading" filterable
        :placeholder="placeholder" :collapse-tags-tooltip="tooltip" :clearable="clearable">
        <!-- 这个地方 添加远程搜索 这个是渠道的   -->
        <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.key" />
    </el-select>
</template>

<script setup lang="ts">
import { useFormItem } from 'element-plus'
import { channelPageApiPost } from '@/api/userMangement'
// 定义组件接收的属性
const selectValue = defineModel<any>("selectValue")
const emit = defineEmits(['myChange'])
const props = defineProps({

    multiple: {
        type: Boolean,
        default: false
    },
    clearable: {
        type: Boolean,
        default: true
    },

    collapseTags: {
        type: Boolean,
        default: true
    },
    tooltip: {
        type: Boolean,
        default: false
    },
});
const options = ref<any>([])
const loading = ref(false)
const searchParams = reactive({
    condition: { channelKey: '', channelCode: null, channelName: null },
    orders: ["id desc"],
    pageNum: 1,
    pageSize: 1000
})
// 获取组件el-form-item的的label名称，添加在placeholder中
const { form, formItem } = useFormItem()
const placeholder = computed(() => {
    // 查询表单
    if (!form?.model && form?.inline) return '请输入搜索关键词'

    // 新增or编辑表单
    if (formItem?.label) return `请输入 ${formItem.label} 查询`

    return '请输入'
})
const selectChange = (val: any) => {
    emit('myChange', val)
    console.log(val);
}

const remoteMethod = async (query: string) => {
    if (query) {
        loading.value = true
        searchParams.condition.channelKey = query
        const res = await channelPageApiPost(searchParams)
        if(res.code == 20000){
            loading.value = false
            options.value = res.data.records && res.data.records.map((item:any)=>{
                return {
                    id:item.id,
                    key:item.channelCode,
                    label:`${item.channelKey} - ${item.channelName}`,
                    value:item.channelCode
                }
            })
        }else{
            options.value = []
        }
        //   开始搜索 渠道Key
    } else {
        options.value = []
    }
}

</script>

<style scoped></style>